<template>
  <div class="course-study-container">
    <div class="course-content">
      <div class="course-header">
        <h2>{{ course.name }}</h2>
        <div class="header-meta">
          <el-tag size="small">{{ course.level }}</el-tag>
          <span class="study-progress">学习进度: {{ progress }}%</span>
        </div>
      </div>

      <!-- 视频播放区域 -->
      <div class="video-container">
        <div class="video-player">
          <img src="https://via.placeholder.com/800x450" alt="视频播放器" class="video-placeholder" />
          <div class="video-controls">
            <i class="el-icon-video-play play-icon"></i>
          </div>
        </div>
      </div>

      <!-- 讲师介绍和工具栏 -->
      <div class="teacher-toolbar">
        <div class="teacher-info">
          <img src="https://via.placeholder.com/40" alt="讲师头像" class="teacher-avatar" />
          <span class="teacher-name">{{ course.teacher }}</span>
        </div>
        <div class="toolbar-buttons">
          <el-button size="small" type="primary" icon="el-icon-document">课程资料</el-button>
          <el-button size="small" icon="el-icon-share">分享</el-button>
          <el-button size="small" icon="el-icon-star-off">收藏</el-button>
        </div>
      </div>

      <!-- 笔记和评论区域 -->
      <div class="study-tabs">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="课程笔记" name="notes">
            <div class="notes-area">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="在这里记录笔记..."
                v-model="noteContent">
              </el-input>
              <div class="notes-toolbar">
                <el-button type="primary" size="small" @click="saveNote">保存笔记</el-button>
              </div>
              
              <div class="saved-notes" v-if="notes.length > 0">
                <h4>已保存的笔记</h4>
                <div class="note-item" v-for="(note, index) in notes" :key="index">
                  <p class="note-content">{{ note.content }}</p>
                  <p class="note-time">{{ note.time }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="课程评论" name="comments">
            <div class="comments-area">
              <div class="comment-item" v-for="(comment, index) in comments" :key="index">
                <div class="comment-user">
                  <img :src="comment.avatar" alt="用户头像" class="user-avatar" />
                  <span class="user-name">{{ comment.username }}</span>
                </div>
                <p class="comment-content">{{ comment.content }}</p>
                <p class="comment-time">{{ comment.time }}</p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 右侧课程章节列表 -->
    <div class="course-chapters">
      <h3>课程目录</h3>
      <el-collapse v-model="activeChapters">
        <el-collapse-item v-for="chapter in course.chapters" :key="chapter.id" :title="chapter.title" :name="chapter.id">
          <div 
            v-for="lesson in chapter.lessons" 
            :key="lesson.id" 
            class="lesson-item"
            :class="{ 'active': currentLesson === lesson.id }"
            @click="selectLesson(lesson.id)">
            <i class="el-icon-video-camera"></i>
            <span class="lesson-title">{{ lesson.title }}</span>
            <span class="lesson-duration">{{ lesson.duration }}</span>
            <i class="el-icon-check" v-if="lesson.completed"></i>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseStudy',
  data() {
    return {
      progress: 35,
      activeTab: 'notes',
      activeChapters: ['1'],
      currentLesson: '1-2',
      noteContent: '',
      notes: [
        { content: '学习了Vue的基础概念，需要多加练习组件的创建和使用。', time: '2023-05-10 14:30' }
      ],
      comments: [
        { 
          username: '学习达人', 
          avatar: 'https://via.placeholder.com/30', 
          content: '这节课讲得非常清晰，老师讲解的很到位！', 
          time: '2023-05-12 10:23' 
        },
        { 
          username: '前端小白', 
          avatar: 'https://via.placeholder.com/30', 
          content: '请问Vuex和Pinia有什么区别呢？', 
          time: '2023-05-11 16:45' 
        }
      ],
      course: {
        id: '1',
        name: 'Vue.js入门课程',
        teacher: '张老师',
        level: '初级',
        chapters: [
          {
            id: '1',
            title: '第一章: Vue基础入门',
            lessons: [
              { id: '1-1', title: '1-1 Vue介绍与环境搭建', duration: '15:30', completed: true },
              { id: '1-2', title: '1-2 Vue实例与生命周期', duration: '20:45', completed: false },
              { id: '1-3', title: '1-3 模板语法与数据绑定', duration: '18:20', completed: false }
            ]
          },
          {
            id: '2',
            title: '第二章: 组件化开发',
            lessons: [
              { id: '2-1', title: '2-1 组件基础概念', duration: '22:10', completed: false },
              { id: '2-2', title: '2-2 组件通信方式', duration: '25:30', completed: false },
              { id: '2-3', title: '2-3 插槽与作用域插槽', duration: '19:15', completed: false }
            ]
          },
          {
            id: '3',
            title: '第三章: 路由与状态管理',
            lessons: [
              { id: '3-1', title: '3-1 Vue Router基础', duration: '23:50', completed: false },
              { id: '3-2', title: '3-2 Vuex状态管理模式', duration: '28:15', completed: false },
              { id: '3-3', title: '3-3 实战：购物车功能开发', duration: '35:40', completed: false }
            ]
          }
        ]
      }
    }
  },
  created() {
    // 获取课程ID
    const courseId = this.$route.params.id;
    
    // 检查课程是否已购买
    if (!this.$store.getters.isCourseAlreadyPurchased(courseId)) {
      this.$message.error('您尚未购买该课程，无法学习');
      // 跳转回课程购买页面
      this.$router.push('/dashboard/purchase');
      return;
    }
    
    // 根据ID加载课程数据
    this.loadCourseData(courseId);
  },
  methods: {
    loadCourseData(courseId) {
      // 这里可以根据课程ID加载具体课程数据
      // 目前使用模拟数据
      console.log(`加载课程ID: ${courseId}的数据`);
      
      // 如果课程ID不是1，更新课程名称
      if (courseId != 1) {
        // 查找对应的课程
        const courseName = this.getCourseNameById(courseId);
        if (courseName) {
          this.course.name = courseName;
        }
      }
    },
    getCourseNameById(courseId) {
      // 课程ID到名称的映射
      const courseMap = {
        '1': 'Vue.js入门课程',
        '2': 'Element UI实战',
        '3': 'Vue Router深度解析',
        '4': 'Vuex状态管理',
        '5': 'Vue 3.0新特性',
        '6': 'Vue项目实战',
        '7': 'Vue性能优化'
      };
      return courseMap[courseId] || '未知课程';
    },
    selectLesson(lessonId) {
      this.currentLesson = lessonId;
      // 这里可以添加加载视频的逻辑
      this.$message.success(`正在加载课时: ${lessonId}`);
    },
    saveNote() {
      if (this.noteContent.trim()) {
        const now = new Date();
        const formattedTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
        
        this.notes.unshift({
          content: this.noteContent,
          time: formattedTime
        });
        
        this.$message.success('笔记保存成功');
        this.noteContent = '';
      } else {
        this.$message.warning('笔记内容不能为空');
      }
    }
  }
}
</script>

<style scoped>
.course-study-container {
  display: flex;
  height: 100%;
  box-sizing: border-box;
}

.course-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.course-header {
  margin-bottom: 20px;
}

.course-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #606266;
}

.study-progress {
  font-size: 14px;
}

.video-container {
  width: 100%;
  background-color: #000;
  position: relative;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.video-placeholder {
  width: 100%;
  display: block;
}

.video-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-icon {
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teacher-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.toolbar-buttons {
  display: flex;
  gap: 10px;
}

.study-tabs {
  margin-top: 20px;
}

.notes-toolbar {
  margin-top: 10px;
  text-align: right;
}

.saved-notes {
  margin-top: 20px;
}

.saved-notes h4 {
  color: #303133;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.note-item {
  background-color: #F8F8F8;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.note-content {
  margin: 0 0 5px 0;
  color: #303133;
}

.note-time {
  margin: 0;
  font-size: 12px;
  color: #909399;
  text-align: right;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.user-name {
  font-weight: bold;
  color: #303133;
}

.comment-content {
  margin: 5px 0;
  color: #606266;
}

.comment-time {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.course-chapters {
  width: 300px;
  border-left: 1px solid #EBEEF5;
  background-color: #fff;
  padding: 20px;
  overflow-y: auto;
}

.course-chapters h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.lesson-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  border-radius: 4px;
  gap: 10px;
}

.lesson-item:hover {
  background-color: #F5F7FA;
}

.lesson-item.active {
  background-color: #ECF5FF;
  color: #409EFF;
}

.lesson-title {
  flex: 1;
}

.lesson-duration {
  color: #909399;
  font-size: 12px;
}
</style> 